<template>
  <div class="app-container">
    <el-form :model="query" :inline="true" ref="searchForm">
      <el-form-item prop="type">
        <el-input v-model="query.type" :placeholder="$t('genCode.tableName')" clearable maxlength="30"></el-input>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom: 10px;">
      <el-button-group>
        <el-button type="primary" size="small" icon="el-icon-download" @click="download">{{$t('table.download')}}</el-button>
        <el-button type="primary" size="small" icon="el-icon-document" @click="toDetail">{{$t('table.detail')}}</el-button>
      </el-button-group>
      <el-button-group style="position: absolute; right: 0px;">
        <el-button type="primary" size="small" icon="el-icon-search" @click="reload">{{$t('table.search')}}</el-button>
        <el-button type="default" size="small" icon="el-icon-refresh" @click="resetForm">{{$t('table.reset')}}</el-button>
      </el-button-group>
    </el-row>
    <el-table ref="table" :data="tableData" border highlight-current-row @row-click="onRowSelected" style="width: 100%" @sort-change="sortChange">
      <el-table-column type="index" :label="$t('table.index')" :index="indexMethod" align="center" width="55"></el-table-column>
      <el-table-column prop="tableName" :label="$t('genCode.tableName')" sortable></el-table-column>
      <el-table-column prop="remarks" :label="$t('genCode.remarks')" sortable></el-table-column>
    </el-table>
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import { loadTableData, reloadTableData, detailTableRow} from '@/utils/utils'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        baseUrl: '/genCode',
        tableData: [],
        total: 0,
        selectedRow: null,
        query: {}
      };
    },
    methods: {
      onRowSelected(row, event, column) {
        this.selectedRow = row;
      },
      indexMethod(index) {
        return index+1;
      },
      sortChange(column, prop, order){
        if(column){
          this.query.sort = column.prop;
          if(column.order == 'descending')
            this.query.order = 'desc';
          else
            this.query.order = 'asc';
        }
        else{
          this.query.sort = null;
          this.query.order = null;
        }
        this.load();
      },
      resetForm(){
        this.$refs['searchForm'].resetFields();
        this.reload();
      },
      load(){
        this.selectedRow = null;
        loadTableData.apply(this, [this.baseUrl+'/page']);
      },
      reload(){
        this.selectedRow = null;
        reloadTableData.apply(this, [this.baseUrl+'/page']);
      },
      toDetail(){
        detailTableRow.apply(this);
      },
      download(){
        if(this.selectedRow){
          window.open(process.env.BASE_API+this.baseUrl+'/download?tableName='+this.selectedRow.tableName+'&token='+getToken());
        }
        else{
          this.$message({
            message: this.$t('notify.unselectedRow'),
            type: 'warning'
          });
        }
      }
    },
    mounted: function () {
      this.reload();
    },
    router: new VueRouter({
      mode: 'abstract',
      routes: [
        { path: '/detail', component: () => import('./dialog/detail') }
      ]
    })
  }
</script>
